<template>
	<Tabs>
		<TabPane label="分类信息">
			<Button type="primary" @click="handleGoEdit()">新增商品分类</Button>
			<div style="position: relative; margin-top: 20px;">
				<div class="ui-category-tree">
					<div class="ui-tree-item head">
						<div class="ui-tree-item-title">分类名称</div>
						<div class="ui-tree-item-attr">分类图片</div>
						<div class="ui-tree-item-spec">关联规格</div>
						<div class="ui-tree-item-type">关联类型</div>
						<div class="ui-tree-item-switch">分类状态</div>
						<div class="ui-tree-item-action">操作</div>
					</div>
					<Tree :data="data" :render="renderContent"></Tree>
				</div>
				<LoadingMask v-if="loading"></LoadingMask>
			</div>
		</TabPane>
	</Tabs>
</template>

<script>
import Util from '@/libs/util.js';
import ImageCell from '@/components/ImageCell/index.vue';
import LoadingMask from '@/components/LoadingMask.vue';
export default {
	name: 'goodsClassify',
	components: {
		ImageCell,
		LoadingMask
	},
	data() {
		return {
			self: this,
			loading: true,
			data: []
		}
	},
	computed: {
		reloadCategory() {
			return this.$store.state.app.reloadCategory;
		}
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			Util.ajax.post(this.API['API_GOODS_CATEGORY_LISTS'], {is_tree: 1, sort: 0}).then((res) => {
				this.loading = false;
				this.data = this.handleFormatData(res, 1);
			}).catch(() => {
				
			});
		},
		handleFormatData(data, level) {
			return data.map(item => {
				let obj = {
					id: item.id,
					pid: item.parent_id,
					title: item.name,
					expand: true,
					img: item.img,
					url: item.url,
					number: item.number,
					status: item.status,
					level: level
				}
				if(item._children && item._children.length > 0) {
					obj.children = this.handleFormatData(item._children, level + 1);
				}
				return obj;
			})
		},
		renderContent (h, { root, node, data }) {
            let btns = [
            	h('Button', {
                    props: {
                    	type: 'warning',
                    	size: 'small'
                    },
                    attrs: {
                    	disabled: data.level == 3
                    },
	                style: {
	                	marginRight: '5px'
	                },
                    on: {
                        click: () => {
                        	let query = [];
                        	if(data.pid != 0) {
                        		query.push(data.pid);
                        	}
                        	query.push(data.id);
                        	this.handleGoEdit({pids: query.join(',')});
                        }
                    }
                }, '添加下级分类'),
            	h('Button', {
                    props: {
                    	type: 'primary',
                    	size: 'small'
                    },
                    on: {
                        click: () => {
                        	this.handleGoEdit({id: data.id});
                        }
                    }
                }, '编辑'),
                h('Poptip', {
	                props: {
	                	confirm: true,
	                	title: '是否确认删除此分类？',
	                	width: 176
	                },
	                style: {
	                	textAlign: 'left'
	                },
	                on: {
	                    'on-ok': () => {
	                    	this.handleDelete(root, node, data);
	                    }
	                }
	            }, [
	            	h('Button', {
	                    props: {
	                    	type: 'error',
	                    	size: 'small'
	                    },
		                style: {
		                	marginLeft: '5px'
		                }
	                }, '删除')
	            ])
            ];
            
            return h('div', {
            	attrs: {
            		'class': 'ui-tree-item level-' + data.level
            	}
            }, [
            	h('div', {
	            	attrs: {
	            		'class': 'ui-tree-item-title'
	            	}
	            }, data.title),
            	h('div', {
	            	attrs: {
	            		'class': 'ui-tree-item-attr'
	            	}
	            }, [
	            	h(ImageCell, {
            			props: {
            				width: '24px',
            				src: data.img
            			}
            		})
	            ]),
            	h('div', {
	            	attrs: {
	            		'class': 'ui-tree-item-spec'
	            	}
	            }, '--'),
            	h('div', {
	            	attrs: {
	            		'class': 'ui-tree-item-type'
	            	}
	            }, '--'),
	            h('div', {
	            	attrs: {
	            		'class': 'ui-tree-item-switch'
	            	}
	            }, data.status ? '启用中' : '已禁用'),
            	h('div', {
	            	attrs: {
	            		'class': 'ui-tree-item-action'
	            	}
	            }, btns)
            ]);
        },
        handleGoEdit(query) {
        	this.$router.push({name: 'goods_goods_classify_edit', query});
        },
        // 删除
        handleDelete(root, node, data) {
           	Util.ajax.post(this.API['API_GOODS_CATEGORY_DESTORY'], {id: data.id}).then((res) => {
           		this.$Message.success('删除成功');
           		if(!node.parent) {
           			// 删除顶级分类直接刷新数据
           			this.init();
           		}else{
           			const parentKey = root.find(el => el === node).parent;
		            const parent = root.find(el => el.nodeKey === parentKey).node;
		            const index = parent.children.indexOf(data);
		            parent.children.splice(index, 1);
           		}
           		if(!this.reloadCategory) {
           			this.$store.commit('setReloadCategory', true);
           		}
           	}).catch(() => {
           		this.$Message.error('删除失败');
           	})
        }
	}
}
</script>

<style lang="less">
.ui-category-tree {
	border: 1px solid #e8eaec;
	border-bottom: 0;
	.ivu-tree ul li {
		position: relative;
		margin: 0;
	}
	.ivu-tree-children {
		padding-left: 0;
	}
	.ivu-tree-arrow {
		position: absolute;
		left: 20px;
		top: 8px;
		z-index: 2;
		i {
			font-size: 14px;
		}
	}
	.ivu-tree-empty {
		text-align: center;
		line-height: 38px;
		border-bottom: 1px solid #e8eaec;
	}
}
.ui-tree-item {
	display: flex;
	width: 100%;
	border-bottom: 1px solid #e8eaec;
	&.head {
		font-size: 14px;
		font-weight: bold;
		background-color: #f8f8f9;
	}
	> div {
		padding: 8px 10px;
		width: 12%;
		text-align: center;
		vertical-align: top;
	}
	&-attr {
		.ui-image-cell {
			display: inline-block;
			vertical-align: top;
		}
	}
	& &-title {
		flex: 1;
		padding-left: 42px;
		text-align: left;
	}
	& &-action {
		width: 200px;
	}
}
.level-1 ~ .ivu-tree-children {
	.ivu-tree-arrow {
		left: 42px;
	}
}
.level-2 .ui-tree-item-title {
	padding-left: 62px;
}
.level-3 .ui-tree-item-title {
	padding-left: 82px;
}
</style>